This is great. Just tested and it works for me. But I have noticed that it only shows if feedback is enable. Is that correct?

Just make sure to add it like this in the README (don't use ; use ,).

            ttsConfig: {
                language: 'en-US',
                voice: 'Google UK English Male', 
                rate: 1,
                pitch: 1,
                volume: 1,
            }

Edit:

I left my testing script here if someone wants to test this out too:

<script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/gh/Anujjoshi3105/FlowiseChatEmbed@feat/text-to-speech-support/dist/web.js"
    Chatbot.init({
        chatflowid: "xxxxxxxxxx",
        apiHost: "xxxxxxxxx",
        theme: {
            ttsConfig: {
                language: 'en-US',
                voice: 'Google UK English Male',
                rate: 1,
                pitch: 1,
                volume: 1,
            }
        }
    })
</script>

Yes, currently the speaker icon only shows if feedback is enabled. Should l make a small update so that it can be toggled independently using a ttsConfig.enabled flag — that way it won't depend on feedback visibility.

Also noted that the Play and Pause icon color for new TTS Button doesn’t update when the feedback color changes — I’ll fix that as well. I plan to complete these changes by tomorrow.

I am just pointing it out, as it was confusing to me why it wasn't showing until I realized about the feedback. I would hold that change until the maintainer has something to say about this; maybe they want it like that.

In relation to the color update, that would definitely be nice to have fixed.

I suggest adding a dropdown at the top of the title bar to select the browser-supported language and speaker (instead harcoding in ttsConfig). However, I’d prefer to proceed with this based on the maintainer’s guidance and requirements.